<template>
    <div class="FooterBg">
        <el-row class="footer">
            <el-col :span="16">
                <el-col :span="8">
                    <ul>
                        <li>
                            <router-link to="">关于我们</router-link>
                        </li>
                        <li>
                            <router-link to="">加入我们</router-link>
                        </li>
                        <li>
                            <router-link to="">联系我们</router-link>
                        </li>
                    </ul>
                </el-col>
                <el-col :span="8">
                    <ul>
                        <li>
                            <router-link to="">帮助中心</router-link>
                        </li>
                        <li>
                            <router-link to="">名词解释</router-link>
                        </li>
                        <li>
                            <router-link to="">法律申明</router-link>
                        </li>
                    </ul>
                </el-col>
                <el-col :span="8">
                    <ul class="FooterServe">
                        <li class="peopleServe">
                            客服专线
                        </li>
                        <li class="serveTime">
                            400-000-9810
                        </li>
                        <li>
                            服务时间(9:00-18:00)
                        </li>
                    </ul>
                </el-col>
            </el-col>
            <el-col :span="8" :gutter="250">
                <el-col :span="12">
                    <ul class="center">
                        <li><img src="../../assets/images/FooterDwApp.png" alt=""></li>
                        <li>下载APP客户端</li>
                    </ul>
                </el-col>
                <el-col :span="12">
                    <ul class="Goright">
                        <li><img src="../../assets/images/FooterWeChart.png" alt=""></li>
                        <li class="textIndent">关注官方微信</li>
                    </ul>
                </el-col>
            </el-col>
        </el-row>
        <div class="FooterAuthenConTianer clearFix">
            <router-link class="fl Authen1" to=""></router-link>
            <router-link class="fl Authen2" to=""></router-link>
            <router-link class="fl Authen3" to=""></router-link>
            <router-link class="fl Authen4" to=""></router-link>
            <router-link class="fl Authen5" to=""></router-link>
            <router-link class="fl Authen6" to=""></router-link>
            <router-link class="fl Authen7" to=""></router-link>
            <router-link class="fl Authen8" to=""></router-link>
        </div>

        <div class="copyRight">
            © 杭州钱内助金融信息服务有限公司 浙ICP备15016122号-1<span id="cnzzCon"></span><span v-html="imghtml"></span>浙公网安备 33010602002059号
        </div>
    </div>
</template>

<script>
     export  default {
         data(){
             return{
                    imghtml: ''
             }
         },
         mounted(){
             let cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
             this.imghtml = (unescape("%3Cspan id='cnzz_stat_icon_1254949000'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1254949000%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
         }
     }
</script>

<style lang="scss">

    .FooterBg {
        background-color: #333;
        padding-bottom: 40PX;
        .footer {
            width: 1200px;
            margin: 0 auto;
            padding: 80px 0 20px 0;
            li {
                a {
                    font-size: 14px;
                    line-height: 3.6;
                    color: #b5b5b5;
                    &:hover {
                        color: #e95412;
                    }
                }

            }
            border-bottom: 1px solid #454444;

        }
    }

    ul.Goright {
        li {
            text-align: right;
            color: #b5b5b5;
            img {
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                filter: grayscale(100%);
                filter: gray;
                transition: all 0.4s;
                &:hover {
                    filter: sepia(0);
                }
            }
        }
        .textIndent {
            text-indent: 103px;
            text-align: unset;
        }
    }

    ul.center {
        li {
            text-align: center;
            color: #b5b5b5;
            img {
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                filter: grayscale(100%);
                filter: gray;
                transition: all 0.4s;
                &:hover {
                    filter: sepia(0);
                }
            }
        }
    }

    ul.FooterServe {
        color: #b5b5b5;
        li {
            line-height: 3.5;
        }
        .peopleServe {
            font-size: 24px;
            line-height: 2.1;
        }
        .serveTime {
            font-size: 24px;
            line-height: 2.1;
        }

    }

    .FooterAuthenConTianer {
        width: 648px;
        margin: 0 auto;
        padding: 20px 0;
        a {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            transition: all 0.4s;
            margin-right: 10px;
            height: 30px;
            background: url("../../assets/images/FooterAuthentication.png") no-repeat;
            &:hover {
                filter: sepia(0);
            }
        }
        a.Authen1 {
            width: 81px;
            background-position: 0 bottom;
        }
        a.Authen2 {
            width: 65px;
            background-position: -81px bottom;
        }
        a.Authen3 {
            width: 82px;
            background-position: -145px bottom;
        }
        a.Authen4 {
            width: 75px;
            background-position: -227px bottom;
        }
        a.Authen5 {
            width: 75px;
            background-position: -302px bottom;
        }
        a.Authen6 {
            width: 67px;
            background-position: -377px bottom;
        }
        a.Authen7 {
            width: 75px;
            background-position: -444px bottom;
        }
        a.Authen8 {
            margin-right: unset;
            width: 58px;
            background-position: -519px bottom;
        }
    }

    .copyRight {
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        color: #666;
        span {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            transition: all 0.4s;
            display: inline-block;
            height: 20px;
            background: url("../../assets/images/FooterAuthentication.png") no-repeat -666px -5px;
            &:hover {
                filter: sepia(0);
            }
            vertical-align: text-top;
            &#cnzz{
                /*display: none;*/
            }
            &#cnzzCon{
                padding: 0 20px 0 10px;
            }
        }
        img {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            transition: all 0.4s;
            &:hover {
                filter: sepia(0);
            }
        }
    }

</style>